﻿@{
    ViewBag.Title = "推广链接转换";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    .md-modal {
        background: #f7f7f7;
    }

    p {
        margin-bottom: 0;
    }

    .jzp_title {
        color: #666;
        padding: 5px;
        font-size: 14px;
        font-weight: bold;
    }

    .jzp_discount {
        padding: 5px;
        overflow: hidden;
        color: #de4444;
    }

    .price {
        font-family: georgia,sans-serif;
        font-size: 24px;
    }

    .Commission {
        float: right;
        padding: 10px 0;
        color: #3bb839;
        font-size: 12px;
        font-weight: bold;
    }

    .shop {
        position: relative;
        left: 0px;
        top: 0;
        padding-left: 40px;
        color: #999;
        font-size: 12px;
        line-height: 20px;
    }

    .T_icon {
        display: block;
        width: 20px;
        height: 20px;
        background: url("../img/pic.png") -20px -100px;
        position: absolute;
        left: 10px;
        top: 0;
    }

    .tao_icon {
        display: block;
        width: 20px;
        height: 20px;
        background: url("../img/pic.png") 0 -100px;
        position: absolute;
        left: 10px;
        top: 0;
    }

    .wu_icon {
        display: block;
        width: 20px;
        height: 20px;
        background: url("../img/pic.png") -60px -100px;
        position: absolute;
        left: 10px;
        top: 0;
    }

    .shao_icon {
        display: block;
        width: 20px;
        height: 20px;
        background: url("../img/pic.png") -80px -100px;
        position: absolute;
        left: 10px;
        top: 0;
    }

    .coupon_icon {
        display: block;
        width: 20px;
        height: 20px;
        background: url("../img/pic.png") -40px -100px;
        position: absolute;
        left: 10px;
        top: 0;
    }

    .xin_icon {
        position: absolute;
        left: 0;
        top: -10px;
        width: 50px;
        height: 50px;
        background: url("../img/pic.png") -50px 0;
    }

    .bao_icon {
        position: absolute;
        left: 0;
        top: -10px;
        width: 50px;
        height: 50px;
        background: url("../img/pic.png") 0 0;
    }

    .te_icon {
        position: absolute;
        left: 0;
        top: -10px;
        width: 50px;
        height: 50px;
        background: url("../img/pic.png") 0 -50px;
    }

    .you_icon {
        position: absolute;
        left: 0;
        top: -10px;
        width: 50px;
        height: 50px;
        background: url("../img/pic.png") -50px -50px;
    }

    .Coupon {
        color: #666;
        position: relative;
        left: 0px;
        top: 0;
        padding-left: 40px;
        font-size: 12px;
        line-height: 20px;
        margin-top: 10px;
    }

        .Coupon b {
            color: #de4444;
            margin: 0 5px;
        }

    .item {
        cursor: pointer;
        padding-bottom: 20px;
        text-decoration: none;
        background: #fff;
        position: relative;
        left: 0;
        top: 0;
    }

        .item:hover {
            box-shadow: rgba(0,0,0,0.2) 0 0 50px;
            transform: rotate(0.5deg);
            transition: 0.2s all ease-in;
        }

    .shopImges {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 0;
        top: 0;
    }

    h6 {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        height: 55px;
        margin: 0;
        padding-left: 60px;
    }

    .md-modal {
        width: 90%;
    }

    .PriceClass {
        padding: 5px 0 5px 10px;
        color: #444;
        font-size: 14px;
    }

    .modal-body .shop {
        margin: 10px 0;
    }

    .money {
        color: #de4444;
    }

    .tao-detail-num {
        font-family: georgia,sans-serif;
        color: #de4444;
        font-size: 16px;
        margin-right: 10px;
    }

    .money.blue {
        color: #4e9cec;
    }

    .tao-detail-num.blue {
        font-family: georgia,sans-serif;
        color: #4e9cec;
        font-size: 16px;
        margin-right: 10px;
    }

    .money.green {
        color: #3bb839;
    }

    .tao-detail-num.green {
        font-family: georgia,sans-serif;
        color: #3bb839;
        font-size: 16px;
        margin-right: 10px;
    }

    .Original {
        color: #999;
        text-decoration: line-through;
        font-family: georgia,sans-serif;
    }

    .PriceClass b {
        color: #de4444;
        margin: 0 5px;
    }

    .btn-primary {
        color: #fff;
        background-color: #337ab7 !important;
        border-color: #2e6da4 !important;
    }

    .PriceClass textarea {
        width: 100%;
        resize: none;
        border: none;
        color: #555;
        word-break: break-all;
        display: block;
        height: 100px;
        background: #fff;
        border-radius: 3px;
    }

    .validity {
        color: #999;
    }

        .validity span {
            color: #333;
            margin: 0 5px;
        }

    @@media screen and (min-width: 900px) {
        .price {
            font-size: 30px;
        }

        .Commission {
            font-size: 14px;
            padding: 10px 0;
        }

        .jzp_discount {
            padding: 10px;
        }

        .jzp_title {
            padding: 10px;
        }

        .shopImges {
            width: 160px;
            height: 160px;
        }

        h6 {
            height: auto;
            padding-left: 170px;
        }

        .modal-body .shop {
            margin-left: 160px;
        }

        .modal-body .PriceClass {
            margin-left: 160px;
        }
    }

    @@media screen and (max-width: 600px) {
        .showhide {
            display: none;
        }

        .btn {
            font-size: 12px !important;
            width: 60px !important;
            padding: 6px 0 !important;
        }
    }
</style>
<div class="row">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-12">
                <div class="main-box">
                    <header class="main-box-header clearfix">
                        <h2>推广链接转换</h2>
                    </header>
                    <div class="main-box-body clearfix">
                        <form role="form">
                            <div class="form-group">
                                <textarea class="form-control" id="exampleTextarea" placeholder="输入要转换的淘宝商品链接" rows="10"></textarea>
                            </div>

                            <div class="form-group">
                                <div class="col-lg-6">
                                    <button type="button" class="btn btn-lg btn-success  ">
                                        &nbsp; &nbsp; 微信推广&nbsp; &nbsp;
                                    </button>
                                    <button type="button" class="btn btn-lg btn-success  ">
                                        &nbsp; &nbsp; QQ推广&nbsp; &nbsp;
                                    </button>
                                </div>
                                <div class="col-lg-6">

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="row" style="display:none">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-12">
                <div class="main-box">
                    <header class="main-box-header clearfix">
                        <h2>推广链接转换</h2>
                    </header>
                    <div class="main-box-body clearfix modal-body">
                        <div class="form-group" style="position: relative;left: 0;top: 0;">
                            <img class="shopImges" src="//img.alicdn.com/bao/uploaded/i4/1670163060/TB2dRxTl5pnpuFjSZFIXXXh2VXa_!!1670163060.jpg_480x480q90.jpg">
                            <h6>夏装新款韩版简约百搭纯白色短袖T恤女宽松显瘦圆领打底衫上衣潮</h6>
                            <p class="shop">
                                <ins class="tao_icon">
                                </ins>转角1号精品女装店
                            </p><p class="PriceClass">
                                <span>价格：</span>
                                <span class="money"></span>
                                <span class="label label-danger">￥16.80</span>
                                <span class="Original">￥19.8</span>
                                <span class="showhide">（月销量<b>25556</b>件）</span>
                            </p><p class="PriceClass">
                                <span>优惠：</span>
                                <span class="money"></span><span class="label label-primary">￥3.00</span>
                                <span class="showhide">（优惠券总量<b>32000</b>，剩余<b>12800</b>张）</span>
                            </p>
                            <p class="PriceClass">
                                <span>佣金：</span><span class="money"></span>
                                <span class="label label-success">￥1.01</span><span class="showhide">（收入比率<b>6%</b>）</span>
                            </p>
                            <div class="PriceClass">
                                <a href="http://item.taobao.com/item.htm?id=547838515120" target="_blank" class="btn btn-danger">商品链接</a>
                                <a href="" target="_blank" class="btn btn-info">3元优惠劵</a>  <a href="javascript:;" class="btn btn-success">微信推广</a>
                                <a href="javascript:;" class="btn btn-success">QQ推广</a>  <a href="javascript:;" class="btn btn-default">复制文案</a>
                            </div>
                            <div class="PriceClass">
                                <textarea class="form-control" id="exampleTextarea" rows="3">儿童阅读绘本【恐龙大探索6册】原价14.8元，券后【9.8元】秒杀领券：http://shop.m.taobao.com/shop/coupon.htm?seller_id=2226065723&amp;activity_id=6c94d2fbcbc2430a90573b156893c5b8下单：https://detail.tmall.com/htm?id=525407496515高清手绘，带注音，字迹清晰，知识点丰富多彩，趣味十足，适合于3-9岁儿童阅读，养成孩子独立思考的能力！！ </textarea>
                            </div>
                            <div class="PriceClass validity">* 优惠券有效期<span>2017年05月28日</span>~<span>2017年06月04日</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                  





